<template>
  <div class="goods">
    <!-- 商品分类 -->
    <div class="menu-wrapper" ref="menu">
      <ul>
        <!--判断如果当前的索引和滑动返回的索引相等，怎么返回一个current的类，给这个类添加样式-->
        <li
          v-for="(item, index) in goods"
          :key="index"
          class="menu-item"
          :class="{ current: currentIndex === index }"
          @click="selectMenu(index, $event)"
        >
          <span class="text border-1px">
            <span v-show="item.type > 0" class="icon" :class="classMap[item.type]"></span>
            {{ item.name }}
          </span>
        </li>
      </ul>
    </div>
    <!-- 商品列表 -->
    <div class="foods-wrapper" ref="foods">
      <ul>
        <li v-for="(item, index) in goods" class="food-list foods-list-hook" :key="index">
          <h1 class="title">{{ item.name }}</h1>
          <ul>
            <li
              v-for="(food, index) in item.foods"
              class="food-item border-1px"
              :key="index"
              @click="selectedFood(food)"
            >
              <div class="icon">
                <img style="width:57px;height:57px" :src="food.icon" alt />
              </div>
              <div class="content">
                <h2 class="name">{{ food.name }}</h2>
                <p class="desc line-limit-length" v-show="true">{{ food.description }}</p>
                <div class="extra">
                  <span class="count">月售{{ food.sellCount }}份</span>
                  <span>好评率{{ food.rating }}%</span>
                </div>
                <div class="price">
                  <span class="now">￥{{ food.price }}</span>
                  <span class="old" v-show="food.oldPrice">￥</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cartcontrol @catchAdd="drop" :food="food"></cartcontrol>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <shop-car
      :selectFoods="selectFoods"
      :deliveryPrice="seller.deliveryPrice"
      :minPrice="seller.minPrice"
    ></shop-car>
    <foodDetail
      v-if="showFoodDetail"
      @foodBack="selectedFood"
      :food="selectFoods"
      :clickFood="clickFood"
    ></foodDetail>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import shopCar from '@/components/shopCar/shopCar'
import cartcontrol from '@/components/cartcontrol/cartcontrol'
import foodDetail from '@/components/goods/foodDetail'
export default {
  props: {
    seller: {
      type: Object,
      default() {
        return {}
      }
    },
    goods: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data () {
    return {
      heightList: [],
      scrollY: 0,
      showFoodDetail: false,
      clickFood: {},
      classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    }
  },
  name: 'goods',
  components: {
    shopCar,
    cartcontrol,
    foodDetail
  },
  mounted () {
    this.$nextTick(() => {
      this.initScroll()
      this.calculationHeight()
    })
  },
  // 可以试一下，使用mounted实现滚动
  methods: {
    // 创建scroll对象，确定可以滚动的元素
    initScroll () {
      this.menuScroll = new BScroll(this.$refs.menu, {
        click: true
      })
      this.foodsScroll = new BScroll(this.$refs.foods, {
        click: true,
        probeType: 3
      })
      // 获取滚动时候的Y值，这里面是否可以做一个优化？？？
      this.foodsScroll.on('scroll', pro => {
        if (pro.y <= 0) {
          this.scrollY = Math.abs(Math.round(pro.y))
        }
      })
    },
    // 处理food分类点击事件,将点击的menu索引和事件作为参数传递过来
    selectMenu (index, event) {
      let foodList = this.$refs.foods.getElementsByClassName('foods-list-hook')
      let element = foodList[index]
      this.foodsScroll.scrollToElement(element, 300)
    },
    // 访问shop-cart子组件的事件，和ref不一样
    drop (target) {
      // 输入的是点击的添加按钮元素dom
      console.log(target)
    },
    // 获取每个foods的高度，把它的值放在一个数组中；是否可以做一个优化？？？？
    calculationHeight () {
      // 根据ref拿到了一个原生的dom，是否可以将它定义为一个常量？？？
      let foodList = this.$refs.foods.getElementsByClassName('foods-list-hook')
      let height = 0
      this.heightList.push(height)
      for (let i = 0; i < foodList.length; i++) {
        height = height + foodList[i].clientHeight
        this.heightList.push(height)
      }
    },
    selectedFood (food) {
      this.showFoodDetail = !this.showFoodDetail
      this.clickFood = food
    }
  },
  computed: {
    // 计算scroll的Y轴对应food的高度区间，并返回区间索引
    currentIndex () {
      for (let i = 0; i < this.heightList.length; i++) {
        let heightTop = this.heightList[i]
        let heightBot = this.heightList[i + 1]
        if (
          !heightBot ||
          (this.scrollY >= heightTop && this.scrollY < heightBot)
        ) {
          // 下面的还有1像素的问题，先注释掉把
          // console.log(this.scrollY + '   ' + heightTop + '  ' + heightBot)
          // console.log('hahha' + i)
          return i
        }
      }
      // 当不存在的时候，默认停留在第一个menu上
      // return 0
    },
    // 获取拥有count属性的food

    selectFoods () {
      let foods = []
      // console.log(`z123${this.goods}`)
      this.goods.forEach(good => {
        good.foods.forEach(food => {
          if (food.count) {
            foods.push(food)
          }
        })
      })
      return foods
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixin'
.goods
  position absolute
  display flex
  overflow hidden
  top 174px
  bottom 46px
  width 100%
  .menu-wrapper
    flex 0 0 80px
    width 80px
    background #f3f5f7
    .menu-item
      display table
      height 54px
      width 56px
      line-height 14px
      padding 0 12px
      &.current
        background-color #fff
        font-weight 700
        z-index 10
        margin-top -1px
        .text
          border-none()
      .icon
        display inline-block
        vertical-align top
        width 12px
        height 12px
        background-size 12px 12px
        margin-right 2px
        background-repeat no-repeat
        &.decrease
          bg-image('~static/good_img/decrease_3')
        &.discount
          bg-image('~static/good_img/discount_3')
        &.discount
          bg-image('~static/good_img/discount_3')
        &.special
          bg-image('~static/good_img/special_3')
        &.invoice
          bg-image('~static/good_img/invoice_3')
        &.guarantee
          bg-image('~static/good_img/guarantee_3')
      .text
        display table-cell
        font-size 12px
        vertical-align middle
        border-1px(rgba(7, 17, 27, 0.2))
  .foods-wrapper
    flex 1
    .title
      padding-left 14px
      height 26px
      line-height 26px
      border-left 2px soild #d9dde1
      font-size 12px
      color rgb(147, 153, 159)
      background #f3f5f7
    .food-item
      display flex
      padding-bottom 13px
      padding-top 5px
      border-1px(rgba(7, 17, 27, 0.1))
      &:last-child
        border-none()
        margin-bottom 0 // 这个不清楚
      .icon
        flex 0 0 57px // 第一个值是放大，默认为0 第二个值是缩小默认为1 最后一个是分配剩余空间前默认是57px
        margin-right 10px
      .content
        position relative
        flex 1
        .name
          margin 2px 0 8px 0
          height 14px
          line-height 14px
          font-size 14px
          color rgb(7, 17, 27)
        .desc, .extra
          line-height 12px
          color rgb(147, 153, 159)
          font-size 10px
        .desc
          margin-bottom 8px
          width 60%
        .extra
          .count
            margin-right 12px
        .price
          font-weight 700
          line-height 24px
          .now
            color rgb(240, 20, 20)
            margin-right 8px
            font-size 14px
          .old
            text-decoration line-through
            font-size 10px
            color rgb(147, 153, 159)
        .cartcontrol-wrapper
          // display: flex;
          position absolute
          right: 33%;
          bottom: -10%;
.line-limit-length
  overflow hidden
  white-space nowrap // 文本不换行，这样超出一行的部分被截取，显示...
  text-overflow ellipsis
</style>
